<template>
  <p-form class="form" ref="form" :model="user" :rules="rules">
    <p-form-item label="用户名" prop="username">
      <!-- <p-input v-model="user.username"></p-input> -->
      <p-input :value="user.username" @input="user.username=$event" placeholder="请输入用户名"></p-input>
    </p-form-item>
    <p-form-item label="密码" prop="password">
      <p-input type="password" v-model="user.password"></p-input>
    </p-form-item>
    <p-form-item>
      <p-button type="primary" @click="login">登 录</p-button>
    </p-form-item>
  </p-form>
</template>

<script>
import PForm from '../src/form/Form'
import PFormItem from '../src/form/FormItem'
import PInput from '../src/form/Input'
import PButton from '../src/form/Button'
export default {
  components: {
    PForm,
    PFormItem,
    PInput,
    PButton
  },
  data () {
    return {
      user: {username: '',password: ''},
      rules: {
        username: [{ required: true, message: '请输入用户名'}],
        password: [
          { required: true, message: '请输入密码'},
          { min: 6, max: 12, message: '请输入6-12位密码' }
        ]
      }
    }
  },
  methods: {
    login () {
      console.log('button')
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('验证成功')
        } else {
          console.log('验证失败')
          return false
        }
      })
    }
  }
}
</script>

<style>
  .form {
    width: 30%;
    margin: 150px auto;
  }
</style>